<template>
	<div
		id="main"
		style="width: calc(100% - 20%); margin: 0 auto; height: 500px"
	></div>
</template>
<script>
import * as echarts from 'echarts'

export default {
	data() {
		return {
			avatar: '',
			name: '',
			list: [100, 200, 300, 400]
		}
	},
	mounted() {
		console.log('路由信息：', this.$route)
		this.avatar = this.$route.query.avatar
		this.name = this.$route.query.name
		// 绘制echarts
		this.drawEchats()
	},
	methods: {
		drawEchats() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'))
			// 绘制图表
			myChart.setOption({
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				xAxis: {
					data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
				},
				yAxis: {},
				series: [
					{
						name: '销量',
						type: 'bar',
						data: this.list
					},
					{
						data: this.list,
						type: 'line'
					}
				]
			})
		}
	}
}
</script>
